<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 10px;
            margin-left: 20px;
            margin-bottom: 50px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 50px;
        }

        /* 
        使用外边距：
        -设置一个元素的上 左外边距 通用影响的是自己的位置 
        -设置一个元素的右 下外边距 影响的是其他元素的位置
        -如果两个元素同时设置一个区域内的外边距，值大的生效 1的下外边距和2的上外边距
        
        
        */

        .box3 {
            width: 200px;
            height: 200px;
            background-color: pink;
            /*  border: 1px solid red; */
        }

        /*  父子级标签关系 如果设置子元素的上外边距会导致父元素往下移动
            称为相邻垂直外边距的重叠
            解决的思路：
            让子元素和父元素的外边距不相邻
            ① 子元素和父元素之间加一个内容 会添加多余的内容
            ②为父元素加上边框隔开 会导致盒子变大
            ③推荐 使用伪元素来解决
        */

        /* 在父元素之前添加一个空的内容隔开子元素 */
        /* .box3::before {
            content: "";
            /* 指定一下内容的性质 */
        /* display: table; */
        /* 元素性质是表格 带边框 */
        /* }  */


        .clear::before {
            content: "";
            /* 指定一下内容的性质 */
            display: table;
            /* 元素性质是表格 带边框 */
        }


        .box4 {
            width: 100px;
            height: 100px;
            background-color: blanchedalmond;
            margin-left: 10px;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <!-- 同级关系 -->
    <div class="box1">1</div>
    <div class="box2">2</div>

    <hr>
    <!-- 父子关系 -->
    <div class="box3 clear">
        <!--   a -->
        <div class="box4">4</div>
    </div>
</body>

</html>